<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>

        // 浏览器的请求都受同源策略的约束
        // 同源策略：域名 协议  端口号   相同
        

        // 实现跨域访问数据
        //    1 jsonp   
        //       后端会返回一个jsonp的接口   调用了一个函数，通过这个函数携带原本要传的数据
        //       前端定义这个函数(数据请求成功以后要做的事情)
        //       实现的原理：不使用ajax请求，而是使用script标签 src属性 不受同源策略的约束
        //       缺点：只能处理get请求

        //   2 cors  跨域资源共享   --- 后端设置权限
        //       后端在返回数据之前，添加一个响应头，添加允许访问的来源  Access-Control-Allow-Origin 


        //   3 代理服务器  proxy  使用本服务器去访问另外一台服务器的数据    ---- 服务器和服务器之间没有同源策略



        // 注意：项目上线以后，使用服务器打开页面的时候，其他资源会有缓存，可能修改了代码，但是没有作用  --- 清缓存


        const xhr = new XMLHttpRequest() ;
        xhr.open('get' , 'http://127.0.0.1:4000/api/test' , true) ;
        xhr.send() ;
        xhr.onreadystatechange = function() {
            if(xhr.readyState == 4 && xhr.status === 200) {
                console.log(xhr.responseText)
            }
        }

    </script>
    
</body>
</html>